import {
  mapGetters
} from 'vuex'
import {
  getInfo,
  updatePassword
} from '@/api/user'
import {
  get_img_src
} from '@/utils/index.js'
import UploaderAvatar from '@/components/Uploader/UploaderAvatar/index.vue'
export default {
  components: {
    UploaderAvatar
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: '修改头像',
      options: {
        img: this.$store.getters.userInfo.photo || null, // 裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true // 固定截图框大小 不允许改变
      },
      previews: {},
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      activeTab: 'resetPwd',
      // 表单校验
      rules: {
        oldPassword: [{
          required: true,
          message: '旧密码不能为空',
          trigger: 'blur'
        }],
        newPassword: [{
          required: true,
          message: '新密码不能为空',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur'
        }
        ],
        confirmPassword: [{
          required: true,
          message: '确认密码不能为空',
          trigger: 'blur'
        },
        {
          required: true,
          validator: equalToPassword,
          trigger: 'blur'
        }
        ]
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  mounted() {

  },
  methods: {
    getUserInfo() { // 获取个人信息
      getInfo().then(response => {
        this.user = response.data
        this.options.img = this.img_src(this.user.photo)
      })
    },
    backUploaderAvatar(data) { // 头像上传子组件的返回值
      this.open = false
      if (data === true) {
        this.getUserInfo()
      }
    },
    // 获取图片信息
    img_src(val) { // 把图片的相对路径转换成绝对路径
      return get_img_src(val)
    },
    // 编辑头像
    editCropper() {
      this.open = true
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updatePassword({
            newPassword: this.user.newPassword,
            oldPassword: this.user.oldPassword
          }).then(
            response => {
              if (response.code === 20000) {
                this.$message({
                  showClose: true,
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  showClose: true,
                  message: response.msg,
                  type: 'error'
                })
              }
            }
          )
        }
      })
    },
    close() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: '/'
      })
    }
  }
}
